@charset"utf-8";
@import"reset.scss";
@import"common.scss";



@function vw($w) {
    @return ($w/1920) * 100 + vw;
}

.wrap{
    
    header{
        width:100%;
        height: vw(780);
        position: relative;

        .shoutu{
         width: 100%;
         height: 100%;
      
        }

        .ziti1{
            width: vw(340);
            height: vw(70);
            position: absolute;
            left: 40%;
            top: 35%;

        }

        .ziti2{
            width: vw(670);
            height: vw(35);
            position: absolute;
            left: 31%;
            top: 50%;

        }
    }

    main{
        
        .chanpin{

            height: vw(1214);
            display: flex;
            justify-content: center;
            align-items: center;

            .chanpinMax{
                width: vw(1420);
                height: vw(940);
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
    
                .chanpin-1{
                    width: vw(420);
                    height: vw(460);
                    
               
    
                    .chanpintu{
                        width: 100%;
                        height: vw(300);
                        cursor: pointer;
                    }
    
                    .text1{
                        margin-top: vw(20);
                        position: relative;
    
                        p{
                            font-size: vw(40);
                            text-align: center;
                          
    
                            &:nth-of-type(2){
                                margin-top: vw(35);
                                font-size: vw(20);
                                color: #e4e4e4;
                                font-weight: bold;
                                letter-spacing: vw(5);
                            }
                        }
                        .xian{
                          width: vw(65);
                          height: vw(3);
                          background-color: orange;
                          position: absolute;
                          left: vw(180);
                          top: vw(60);
                          transition: all 1s;
                    

                        }
    
                    }

                    &:hover{

                      .xian{
                        width: 100%;
                        left: 0;
                        transition: all 1s;
                      }

                    }
                }
    
            }

        }


        .partner {
            width: 100%;
            height: vw(740);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: vw(-100);
      
            p {
              color: #333333;
              font-size: vw(50);
              margin-bottom: vw(10);
              font-weight: bold;
              letter-spacing: vw(3);
            }
      
            span {
              color: #d6d6d6;
              font-size: vw(30);
              margin-bottom: vw(55);
              letter-spacing: vw(10);
              font-weight: bold;
            }
      
            .pinpai {
              width: vw(1422);
              height: vw(430);
              display: flex;
              flex-wrap: wrap;

                img {
           
                  width: vw(232);
                height: vw(135);
                transition: all 0.3s;
                  cursor: pointer;
                
                  &:hover{
                    transform: scale(1.3) translateZ(0);
                  }
                  
                }
            }
          }
        
    }


  
}